.windows-titlebar {
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 24px
  display: flex
  align-items: center
  background-color $TitleBarBg
  border-top: 1px solid #000
  font-size: 12px
  color: $TitleBarText
  font-family: $MainFont
}

.windows-titlebar .events {
  top: 0
  left: 50%
  margin-left: -78px
}

.icon {
  height 20px
  width  20px
  margin-left auto
  margin-top 5px
}

.windows-titlebar-title {
  top: initial !important
  padding-left: 12px !important
  padding-top: 5px
  font-size: 14px !important
  color: inherit !important
  text-shadow: black 0 0 0
  width: auto
  margin-right: -64px
  opacity: 0.97
}

.window-controls {
  margin-left: auto
  display: flex
  align-items: center
  -webkit-app-region: no-drag
}

.window-control {
  padding: 0
  height: 24px
  width: 30px
  cursor: initial !important
  opacity: 0.97
}

.window-close:hover {
  opacity: 1
  background-color: rgba(232, 17, 35, .9) !important
}

.window-minimize,
.window-maximize {
  opacity: 0.87
}

.window-minimize:hover,
.window-maximize:hover {
  opacity: 1
  background-color: #3a3939 !important
}

.control-icon {
  width: 100%;
  height: 100%;
}

.window-close-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size: 10px
  filter: $TbarIconFilter
}

.window-close:hover .window-close-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size: 10px
  filter: none
}

.window-maximize-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M11 0v11H0V0h11zM9.899 1.101H1.1V9.9h8.8V1.1z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size: 10px
  filter: $TbarIconFilter
}

.window-maximize:hover .window-maximize-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M11 0v11H0V0h11zM9.899 1.101H1.1V9.9h8.8V1.1z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size: 10px
  filter: none
}

.window-umaximize .window-maximize-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M11 8.798H8.798V11H0V2.202h2.202V0H11v8.798zm-3.298-5.5h-6.6v6.6h6.6v-6.6zM9.9 1.1H3.298v1.101h5.5v5.5h1.1v-6.6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size: 10px
  filter: $TbarIconFilter
}

.window-umaximize:hover .window-maximize-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M11 8.798H8.798V11H0V2.202h2.202V0H11v8.798zm-3.298-5.5h-6.6v6.6h6.6v-6.6zM9.9 1.1H3.298v1.101h5.5v5.5h1.1v-6.6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size: 10px
  filter: none
}

.window-minimize-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M11 4.399V5.5H0V4.399h11z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size: 10px
  filter: $TbarIconFilter
}

.window-minimize:hover .window-minimize-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M11 4.399V5.5H0V4.399h11z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size: 10px
  filter: none
}
